<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04指令和缩写方法</title>
</head>
<body>
<div id="app">
    计算器：{{counter}}<br>
    <!--v-bind缩写直接省略、v-on缩写为@
        1、v-bind:href = :href
        2、v-bind:[key] = :[key]
        3、v-on:click = @click
        4、v-on:[key] = @[key]
        5、注意：v-if和v-for后边是等号（v-if=xxx、v-for=xxx）
    -->
    <!--动态设置href参数的值-->
    <a :href="hrefUrl" v-text="hrefUrl" :target="aTarget"></a><br>
    <!--动态设置动态参数的值、:[attrname]中括号内必须是小写字母-->
    <a :[attrname]="hrefUrl" v-text="hrefUrl" :target="aTarget"></a><br>
    <span v-if="true">v-if=true 直接写true</span><br>
    <span v-if="false">v-if=true 直接写false</span><br>
    <span v-if="isShow">v-if=true 调用isShow属性</span><br>
    <input v-if="isShow" placeholder="v-if=true" />
    <input v-else placeholder="v-if=false" />
</div>
<script src="../vue.global.3.0.5.js"></script>
<script>
    //声明一个选项对象
    const App={
        //初始数据
        data(){
            return {
                counter: 100,
                isShow: true,
                aTarget: "_blank",
                hrefUrl: "https://www.baidu.com/",
                attrname: "href"
            }
        }
    }

    //全局API对象，创建应用对象返回(选项对象).挂载方法(DOM节点)
    const vm = Vue.createApp(App).mount("#app");
</script>
</body>
</html>